<template>
	<view class="wapper">
		<view class="form-con">
			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text>
					实际保养时间
				</view>
				<view class="value" @click="showTimePicker">

					<text class="text" v-if="form.actualTime.length>0">
						{{form.actualTime[0]}}~{{form.actualTime[1]}}
					</text>
					<text v-else>请选择</text>

					<u-icon name="arrow-right" color="#b3b3b3" size="28rpx"></u-icon>
				</view>
			</view>
			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text>实际保养人(可多选)
				</view>
				<view class="value" @click="showUser=true">
					<text :class="form.maintainByName?'text':''">
						{{form.maintainByName || '请选择'}}
					</text>
					<u-icon name="arrow-right" color="#b3b3b3" size="28rpx"></u-icon>
				</view>
			</view>

			<view class="item-list-none">
				<view class="name">
					<text class="red">
						*
					</text>
					保养情况
				</view>
			</view>
			<view class="text-area">
				<textarea maxlength="500" v-model="form.maintainResult" placeholder="请输入"></textarea>
			</view>
		</view>
		<view class="footer" @click="newSubmit">
			提交
		</view>

		<term-picker :visable.sync="timeShow" :minYear="1900" :timeLimit="false" :deferYear="30" themeColor="#407FFF"
			startText="开始时间" endText="结束时间" @confirm="confirm">
		</term-picker>
		<template v-if="userList && userList.length>0">
			<changeMoreUser @closeUser="closeUser" :userList="userList" :checkboxValue="form.maintainByList"
				title="选择实际保养人" @changeItem="changeItem" :showUser="showUser"></changeMoreUser>
		</template>

	</view>
</template>

<script>
	import termPicker from '@/components/term-picker/term-picker.vue'
	import changeMoreUser from '@/components/changeMoreUser/index.vue'
	import {
		setFixResult
	}
	from '@/api/maintain.js'
	import {
		getUserList
	} from '@/api/common.js'

	export default {
		components: {
			termPicker,
			changeMoreUser
		},
		data() {
			return {
				timeShow: false,
				showUser: false,
				userList: [],
				// 表单参数
				form: {
					id: null,
					maintainResult: '',
					actualStartTime: '',
					actualEndTime: '',
					actualTime: [],
					maintainByList: [],
					maintainByName: ''
				},
				params: {
					year: true,
					month: true,
					day: true
				},
			}
		},
		created() {

		},
		onLoad(option) {
			this.form.id = option.id || ''
			this.getUsers()

		},
		methods: {
			getUsers() {
				getUserList({
					deptId: ''
				}).then(response => {
					const {
						rows
					} = response
					this.userList = rows || []
				})

			},
			closeUser() {
				this.showUser = false
			},
			// changeItem(item) {
			// 	this.form.maintainBy = item.userId
			// 	this.form.maintainByName = item.nickName
			// 	this.showUser = false
			// },
			changeItem(nickNames, userIds) {
				this.form.maintainByList = userIds
				this.form.maintainByName = nickNames
				this.showUser = false
			},
			showTimePicker() {
				this.timeShow = true
			},
			confirm(date) {
				this.form.actualTime = date
				this.form.actualStartTime = date[0]
				this.form.actualEndTime = date[1]

				console.log(date) // ['2021-06-01', '2021-07-01']
			},


			/** 提交按钮 */
			newSubmit() {
				if (this.form.actualTime.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择实际保养时间',
						duration: 3000,
					})
					return
				}
				if (!this.form.maintainByName) {
					uni.showToast({
						icon: 'none',
						title: '请选择实际保养人',
						duration: 3000,
					})
					return
				}

				if (!this.form.maintainResult) {
					uni.showToast({
						icon: 'none',
						title: '保养情况不能为空',
						duration: 3000,
					})
					return
				}
				uni.showLoading({
					mask: true,
					title: '加载中',
				})
				setFixResult(this.form).then(response => {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '保存成功',
						duration: 2000,
					})
					setTimeout(() => {
						uni.hideLoading()
						uni.navigateBack({
							delta: 1
						})
					}, 2000)

				}).finally(() => {

				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.wapper {
		width: 100vw;
		min-height: 100vh;
		background: #F5F7F9;
		overflow: hidden;
		// padding-bottom: 104rpx;


		.form-con {
			margin-top: 10rpx;
			background: #fff;
			height: calc(100vh - 300 rpx);

			.item-list-none {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;

				.name {
					font-size: 32rpx;
					font-weight: 400;

					.red {
						color: #FF654E;
					}
				}

			}

			.table {
				padding: 0 30rpx;

				.list-list {
					width: 100%;

					.list-item {
						padding: 10rpx 0;
						min-height: 60rpx;
						line-height: 60rpx;
						border-bottom: 1rpx solid #E3E7EE;

						.item-index {
							width: 100rpx;
							float: left;
							text-align: center;

						}

						.item-name,
						.item-content {
							float: left;
							width: calc((100% - 180rpx) / 2);
							height: auto;

						}

						.item-handle {
							float: left;
							text-align: center;
							width: 80rpx;
							display: flex;
							justify-content: center;
							line-height: 80rpx;
							height: auto;

						}

						&:first-child {
							border-bottom: none !important;
							border-top: 1rpx solid #E3E7EE;
						}
					}


				}

			}

			.add-project {
				clear: both;
				padding: 26rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #3685E6;
				border-bottom: 2rpx solid #F5F7F9;

				image {
					width: 48rpx;
					height: 49rpx;
				}
			}

			.text-area {
				margin: 0 30rpx;

				textarea {
					width: 100%;
				}
			}

			.item-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 2rpx solid #F5F7F9;

				.name {
					font-size: 32rpx;
					font-weight: 400;
					margin-right: 20rpx;

					.red {
						color: #FF654E;
					}
				}

				.value {
					font-size: 24rpx;
					font-weight: 400;
					display: flex;
					color: #b3b3b3;
					flex: 1;

					width: 370rpx;
					justify-content: flex-end;


					text {
						margin-right: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.text {
						color: #000;
					}
				}
			}
		}

		.footer {
			width: 686rpx;
			height: 104rpx;
			background: #407FFF;
			border-radius: 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// position: fixed;
			// bottom: 118rpx;
			// left: 38rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin: 38rpx auto;

		}
	}
</style>
